<template>
    <div style='width:400px'>
        <a-form ref='formRef' autocomplete='off' layout='vertical'>
            <a-form-item name='email'>
                <a-avatar :size='120' :src='formData.img'></a-avatar>
                <div class='m-t-10'>
                    <a-upload accept='image/gif,image/jpeg,image/jpg,image/png' :showUploadList='false' :customRequest='customRequest' :before-upload='beforeUpload'>
                        <a-button :loading='uploading'>
                        <UploadOutlined />
                        上传头像
                        </a-button>
                    </a-upload>
                </div>
            </a-form-item>
            <a-form-item label='邮箱' name='email'>
                <a-input size='large' v-model:value='formData.email' type='text' />
            </a-form-item>
            <a-form-item label='昵称' name='username'>
                <a-input size='large' v-model:value='formData.username' type='text' />
            </a-form-item>
            <a-form-item label='所在地区' name='username'>
                <a-cascader size='large' v-model:value='formData.area' placeholder='' :fieldNames='{label : "name", value : "id"}' :options='areaOptions'></a-cascader>
            </a-form-item>
            <a-form-item>
                <a-button size='large' type='primary' :loading='loading' @click='submit'>保 存</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from "@vue/reactivity";
import { UploadOutlined } from '@ant-design/icons-vue'
import { uploadApi, basicInfoApi, changeBasicInfoApi } from '@/api/user'
import { message } from "ant-design-vue";
import { useStore } from "vuex";

    const $store = useStore()

    const formData = reactive({
        img : '',
        email : '',
        username : '',
        province_id : 0,
        city_id : 0,
        district_id : 0,
        area : []
    })

    const areaOptions = ref([])
    const loading = ref(false)
    const uploading = ref(false)

    function beforeUpload(file) {
       return true
    }

    async function customRequest({file}) {
        const form = new FormData()
        form.append('img', file)
        uploading.value = true
        const res = await uploadApi(form)
        uploading.value = false
        if(res.success) {
            formData.img = res.data.img
        }else {
            message.error(res.message)
        }
    }

    async function submit() {
        let params:any = JSON.parse(JSON.stringify(formData))
        
        if(params.area && params.area.length > 0) {
            params.province_id = params.area[0]
            params.city_id = params.area[1]
            params.district_id = params.area[2]
        }

        loading.value = true
        const res = await changeBasicInfoApi(params)
        loading.value = false
        if(res.success) {
            message.success('更新成功')
        }else {
            message.error(res.message)
        }

    }

    basicInfoApi().then(res => {
        const data = res.data
        formData.img = data.head_portrait
        formData.email = data.email
        formData.username = data.username

        areaOptions.value = data.region_tree.children

        if(data.province) {
            formData.area.push(data.province.id)
        }
        if(data.city) {
            formData.area.push(data.city.id)
        }
        if(data.district) {
            formData.area.push(data.district.id)
        }
    })
</script>
